<template>
	<view>
		<comHeader :config="navConfig" :rightIcoTapHandle="rightIcoTapHandle"/>
		<view class="bgc">
			<image src="../../../static/myPic/touXiang.png" mode=""></image>
			<text>更改头像</text>
		</view>
		<view class="order-info-line">
			<text class="order-label">昵 称</text>
			<input type="text" placeholder="鸭鸭" placeholder-style="color:#999999;" class="order-input">
		</view>
		<view class="order-info-line">
			<text class="order-label">账 号</text>
			<input type="text" placeholder="1588762664" placeholder-style="color:#999999;" class="order-input">
		</view>
		<view @tap="toggleMask" class="order-info-line">
			<text class="order-label">性 别</text>
			<input type="text" placeholder="男" placeholder-style="color:#999999;" class="order-inputs">
			<view class="img"><image src="/static/jiantou.png"></image></view>
		</view>
		<navigator url="birthday" class="order-info-line">
			<text class="order-label">年 龄</text>
			<input type="text" placeholder="18" placeholder-style="color:#999999;" class="order-inputs">
			<view class="img"><image src="/static/jiantou.png"></image></view>
		</navigator>
		<view class="order-info-line">
			<text class="order-label">地 区</text>
			<!-- <input type="text" placeholder="上海" placeholder-style="color:#999999;" class="order-input"> -->
			<input type="text" placeholder="上海" placeholder-style="color:#999999;" class="order-inputs" @click="showMulLinkageThreePicker">
			<view class="img"><image src="/static/jiantou.png"></image></view>
		</view>
		
		<mpvue-picker :themeColor="themeColor" ref="mpvuePicker" :mode="mode" :deepLength="deepLength" :pickerValueDefault="pickerValueDefault"
		 @onConfirm="onConfirm" @onCancel="onCancel" :pickerValueArray="pickerValueArray"></mpvue-picker>
		<mpvue-city-picker :themeColor="themeColor" ref="mpvueCityPicker" :pickerValueDefault="cityPickerValueDefault"
		 @onCancel="onCancel" @onConfirm="onConfirm"></mpvue-city-picker>
	</view>
</template>

<script>
	// https://github.com/zhetengbiji/mpvue-picker
	import mpvuePicker from '../../../components/mpvue-picker/mpvuePicker.vue';
	// https://github.com/zhetengbiji/mpvue-citypicker
	import mpvueCityPicker from '../../../components/mpvue-citypicker/mpvueCityPicker.vue'	
	// import cityData from '../../../common/city.data.js';
	export default{
		components: {
			mpvuePicker,
			mpvueCityPicker
		},
		data(){
			return{
				navConfig:{
					isFixed:false, //是否absolute布局
					comScroll:0,
					left:{
						
						isShowLeft:true,
						leftGobackColor:'black', //左边返回icon颜色
					},
					mid:{
						isShowMid:true,
						text:'编辑资料'
					},
					right:{
						text:'',
						isShowRight:true,
						ico:'/static/payIcon/use.png',//右侧图标地址
					}
				},
				
				curTabIndex: 0,
				// mulLinkageTwoPicker: cityData,
				cityPickerValueDefault: [0, 0, 1],
				themeColor: '#007AFF',
				pickerText: '',
				mode: '',
				deepLength: 1,
				pickerValueDefault: [0],
				pickerValueArray:[]
			}
		},
		methods: {
				onCancel(e) {
					console.log(e)
				},
				// 单列
				showSinglePicker() {
					this.pickerValueArray = this.pickerSingleArray
					this.mode = 'selector'
					this.deepLength = 1
					this.pickerValueDefault = [0]
					this.$refs.mpvuePicker.show()
				},
				// 二级联动选择
				showMulLinkageTwoPicker() {
					this.pickerValueArray = this.mulLinkageTwoPicker
					this.mode = 'multiLinkageSelector'
					this.deepLength = 2
					this.pickerValueDefault = [0, 0]
					this.$refs.mpvuePicker.show()
				},
				// 三级联动选择
				showMulLinkageThreePicker() {
					this.$refs.mpvueCityPicker.show()
				},
				onConfirm(e) {
					this.pickerText = JSON.stringify(e)
				},
				toggleMask() {
					uni.showActionSheet({
						// title:'标题',
						itemList: ['男', '女'],
						success: (e) => {
							console.log(e.tapIndex);
							// uni.showToast({
							// 	title:"点击了第" + e.tapIndex + "个选项",
							// 	icon:"none"
							// })
						}
					})
				},
			},
		onBackPress() {
		  if (this.$refs.mpvuePicker.showPicker) {
		  	this.$refs.mpvuePicker.pickerCancel();
		    return true;
		  }
		  if (this.$refs.mpvueCityPicker.showPicker) {
		  	this.$refs.mpvueCityPicker.pickerCancel();
		    return true;
		  }
		},
			onUnload() {
				if (this.$refs.mpvuePicker.showPicker) {
					this.$refs.mpvuePicker.pickerCancel()
				}
				if (this.$refs.mpvueCityPicker.showPicker) {
					this.$refs.mpvueCityPicker.pickerCancel()
				}
			}
	}
</script>

<style>
	.bgc{
		width: 750upx;
		height: 324upx;
		background: #F6F6F6;
		margin-top: 95upx;
	}
	.bgc image{
		width: 120upx;
		height: 120upx;
		margin-left: 317upx;
		margin-top: 93upx;
	}
	.bgc text{
		font-size: 22upx;
		font-family: PingFang SC Regular;
		color: rgba(255,168,90,1);
		margin-left: 333upx;
		margin-top: 28upx;
	}
	.order-info-line{
		width: 660upx;
		margin-top: 34upx;
		margin-left: 52upx;
		display: flex;
		flex-direction: row;
		border-bottom: rgba(220,220,220,1) solid 1upx;
	}
	.order-label{
		width: 173upx;
		display: block;
		line-height: 50upx;
		font-size: 30upx;
		height: 50upx;
		padding-top: 22upx;
		margin-left: 30upx;
	}
	.order-input{
		height: 50upx;
		width: 400upx;
		font-size: 28upx;
		padding-top: 22upx;
		margin-left: 95upx;
		color: #999999;
		/* float: left; */
	}
	.order-inputs{
		height: 50upx;
		width: 400upx;
		font-size: 28upx;
		padding-top: 22upx;
		margin-left: 108upx;
		color: #999999;
	}
	.img image{
		width: 25upx;
		height: 25upx;
		/* float: left; */
		/* margin-left: 680upx; */
		color: #BBBBBB;
		/* margin-top: -10upx; */
	}
</style>
